<div class="tlp-table-actions">
    <button type="button" class="tlp-button-primary tlp-table-actions-element"><i class="tlp-button-icon fa fa-plus"></i> Add user</button>
    <div class="tlp-table-actions-spacer"></div>
    <div class="tlp-form-element tlp-table-actions-element">
        <input type="search"
            class="tlp-search"
            id="filter-table"
            data-target-table-id="my-table"
            autocomplete="off"
            placeholder="Firstname or age">
    </div>
</div>
<table class="tlp-table" id="my-table">
    <thead>
        <tr>
            <th class="tlp-table-cell-numeric">
                <a href="javascript:;">Id</a>
            </th>
            <th class="tlp-table-cell-filterable">Firstname</th>
            <th>Lastname</th>
            <th class="tlp-table-cell-numeric">Age</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="tlp-table-empty-filter">
            <td colspan="5" class="tlp-table-cell-empty">
                There isn't any matching users
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">1</a>
            </td>
            <td class="tlp-table-cell-filterable">Allen</td>
            <td>Woody</td>
            <td class="tlp-table-cell-numeric tlp-table-cell-filterable">34</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">8</a>
            </td>
            <td class="tlp-table-cell-filterable">Brian</td>
            <td>Wilson</td>
            <td class="tlp-table-cell-numeric tlp-table-cell-filterable">49</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">149</a>
            </td>
            <td class="tlp-table-cell-filterable">John</td>
            <td>Bonham</td>
            <td class="tlp-table-cell-numeric tlp-table-cell-filterable">28</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">54</a>
            </td>
            <td class="tlp-table-cell-filterable">June</td>
            <td>Carter</td>
            <td class="tlp-table-cell-numeric tlp-table-cell-filterable">12</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">55</a>
            </td>
            <td class="tlp-table-cell-filterable">Johnny</td>
            <td>Cash</td>
            <td class="tlp-table-cell-numeric tlp-table-cell-filterable">29</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">3</a>
            </td>
            <td class="tlp-table-cell-filterable">Mitch</td>
            <td>Mitchell</td>
            <td class="tlp-table-cell-numeric tlp-table-cell-filterable">89</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">43</a>
            </td>
            <td class="tlp-table-cell-filterable">John Paul</td>
            <td>Jones</td>
            <td class="tlp-table-cell-numeric tlp-table-cell-filterable">34</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
            </td>
        </tr>
        <tr>
            <td class="tlp-table-cell-numeric">
                <a href="javascript:;">387</a>
            </td>
            <td class="tlp-table-cell-filterable">John</td>
            <td>Bronze</td>
            <td class="tlp-table-cell-numeric tlp-table-cell-filterable">22</td>
            <td class="tlp-table-cell-actions">
                <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="javascript:;">
                    <i class="fa fa-hand-peace-o"></i> Peace
                </a>
            </td>
        </tr>
    </tbody>
</table>
<script>
    tlp.filterInlineTable(document.getElementById('filter-table'));
</script>
